<template>
  <div class="box">

    <div class="box" v-if="$route.path === '/warehouseArchives'">
      <div class="fun-btn">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleDrawer('新增库房')">新增库房</el-button>
        <el-button type="primary" size="small" icon="el-icon-edit" @click="handleDrawer('编辑库房')">编辑库房</el-button>
        <el-button type="primary" size="small" icon="el-icon-delete" @click="handleDel">删除库房</el-button>
<!--        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleDrawer('批量新增库房')">批量新增库房</el-button>-->
      </div>

      <el-drawer
        :title="setDrawer.title"
        :size="setDrawer.size"
        :direction="setDrawer.direction"
        :visible.sync="drawer"
      >

        <add-house v-if="setDrawer.title === '新增库房' || setDrawer.title === '编辑库房'"
                   :type="type"
                   :rowData="rowData"
                   @handleSuccess="handleSuccess"></add-house>

        <batch-add v-if="setDrawer.title === '批量新增库房'"></batch-add>

      </el-drawer>

      <ul class="house" v-loading="listLoading">
        <li v-for="(item, index) in listData" :key="index"
            :class="{'active': rowData.id === item.id}"
            @click="handleCheck(item)"
            @dblclick="handleToHose(item)">
            <list-item :item="item" @change="handleEdit"></list-item>
        </li>
      </ul>
    </div>

    <div class="box" v-else>
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import AddHouse from './components/addHouse'
import BatchAdd from './components/batchAdd'
import { detHouseList, editHouseList, getHouseList } from '../../../../api/house/houseArchives'
import ListItem from './components/listItem'

export default {
  name: 'index',
  components: { ListItem, BatchAdd, AddHouse },
  data () {
    return {
      listLoading: false,
      drawer: false,
      type: '',
      setDrawer: {
        title: '',
        size: '',
        direction: 'ltr'
      },
      rowData: {},
      page: {
        pageSize: 20,
        pageNo: 1,
        total: 0
      },
      listData: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      const param = {
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo
      }
      this.listLoading = true

      getHouseList(param).then(res => {
        // console.log(res.data.data)
        this.listData = res.data.data
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleEdit (item) {
      // 修改
      editHouseList(item).then(res => {
        this.$message.success('修改成功！')
      })
    },
    handleSuccess () {
      // 新增成功
      this.drawer = false
      this.getList()
    },
    handleCheck (item) {
      this.rowData = this.rowData.id === item.id ? {} : item
    },
    handleToHose (item) {
      this.$router.push({
        path: '/warehouseArchives/warehouseWithin',
        query: {
          id: item.id,
          repoCode: item.repoCode
        }
      })
    },
    handleDrawer (type) {
      const arr = [{
        title: '新增库房',
        size: '50%',
        direction: 'ltr',
        type: 'add'
      }, {
        title: '编辑库房',
        size: '50%',
        direction: 'ltr',
        type: 'edit'
      }, {
        title: '批量新增库房',
        size: '50%',
        direction: 'ltr',
        type: 'batchAdd'
      }]
      if (type === '编辑库房') {
        if (!this.rowData.id) {
          this.$message.warning('请选择库房进行编辑！')
          return
        }
      }

      arr.map(item => {
        if (item.title === type) {
          this.setDrawer = item
          this.type = item.type
        }
      })

      this.drawer = true
    },
    handleDel () {
      if (!this.rowData.id) {
        this.$message.warning('请选择库房进行删除！')
        return
      }
      this.$confirm('此操作将永久删除该选中库房, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        detHouseList([this.rowData.id]).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../styles/mixin";

  .box {
    .house {
      @include fj(flex-start);
      flex-wrap: wrap;
      margin-top: 20px;
      max-height: calc(100vh - 150px);
      overflow-y: auto;

      li {
        text-align: center;
        margin: 10px;
        @include wh(140px, 170px);
        padding: 10px 0;
        cursor: pointer;
        border-radius: 4px;

        &.active, &:hover {
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
        }
        &.active{
          background: #fff;
        }

      }
    }
  }
</style>
